<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>渐变色练习</title>
</head>

<body><h2>案例</h2>
    <div style="display: flex;">
    <div class="first"></div>
    <div class="second"></div>
    <div class="third"></div>
    <div class="fourth"></div>
    <div class="fifth"></div>
    <div class="sixth"></div></div><br>
    <h2>举例</h2><div style="display: flex;">linear-gradient
    <div class="seventh"></div>radial-gradient
    <div class="eighth"></div>repeating-linear-gradient
    <div class="ninth"></div>repeating-radial-gradient
    <div class="tenth"></div></div>
    <style>
        .first {
            border: 1px red solid;
            width: 300px;
            height: 200px;
            background-image: linear-gradient(180deg, aqua, green);
        }

        .second {
            border: 1px red solid;
            width: 300px;
            height: 200px;
            background-image: linear-gradient(90deg, yellow, green, blue 50%);
        }

        .third {
            border: 1px red solid;
            width: 300px;
            height: 200px;
            background-image: linear-gradient(54deg, red, orange, yellow, green, blue 50%);
        }

        .fourth {
            border: 1px red solid;
            width: 300px;
            height: 200px;
            background-image: radial-gradient(circle, yellow, green);
        }

        .fifth {
            border: 1px red solid;
            width: 300px;
            height: 200px;
            background-image: radial-gradient(200px 80px, aqua, green);
        }

        .sixth {
            border: 1px red solid;
            width: 300px;
            height: 200px;
            background-image: repeating-linear-gradient(to bottom, white, silver 30px);
        }
        .seventh{ border: 1px red solid;
            width: 300px;
            height: 200px;
            background-image:linear-gradient(135deg,#66ccff,silver,gold,#39C5BB);}
        .eighth{ border: 1px red solid;
            width: 300px;
            height: 200px;
            background-image:radial-gradient(circle,#66ccff,silver,gold,#39C5BB);}
        .ninth{border: 1px red solid;
            width: 300px;
            height: 200px;
            background-image:repeating-linear-gradient(#66ccff,silver,gold,#39C5BB);}
        .tenth{border: 1px red solid;
            width: 300px;
            height: 200px;
            background-image:repeating-radial-gradient(#66ccff,silver,gold,#39C5BB);}
    </style>

</body>

</html>